<template>
  <div class="manage-table">
    <slot name="search"></slot>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con">
        <vxe-column type="seq" width="60" fixed="left" title="序号"></vxe-column>
        <vxe-column field="meetingName" title="会议主题" min-width="200" fixed="left"></vxe-column>
        <vxe-column field="meetingTime" title="会议时间" width="140"></vxe-column>
        <vxe-column field="meetingPlace" title="会议地点" min-width="120"></vxe-column>
        <vxe-column field="participants" title="参会人员" min-width="200"></vxe-column>
        <vxe-column field="meetingStatus" title="会议状态" width="120">
          <template #default="{ row }">
            <span>{{ row.meetingStatus | MeetStatus }}</span>
          </template>
        </vxe-column>
        <vxe-column field="createByName" title="录入人员" width="120"></vxe-column>
        <vxe-column title="操作" width="120" fixed="right">
          <template #default="{ row }">
            <template v-if="row.meetingStatus === '0'">
              <el-button type="text" style="color: #2b78f1" @click.stop="editMeet(row)">编辑</el-button>
              <el-button type="text" style="color: #2b78f1" @click.stop="delMeet(row)">删除</el-button>
            </template>
            <el-button
              type="text"
              style="color: #2b78f1"
              @click.stop="cancleMeet(row)"
              v-if="['1', '2'].includes(row.meetingStatus) && row.createBy === userIdLogin">
              取消
            </el-button>
            <el-button type="text" style="color: #2b78f1" @click.stop="detail(row)" v-if="row.meetingStatus !== '0'">
              查看
            </el-button>
            <el-button
              type="text"
              style="color: #2b78f1"
              @click.stop="updateMeet(row)"
              v-if="['1'].includes(row.meetingStatus) && (isOrgRole || isPartRole) && row.createBy !== userIdLogin">
              审批
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <slot name="pagination"></slot>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ManageTable',
  emits: ['del-meet', 'edit-meet', 'cancle-meet', 'detail', 'update-meet'],
  components: {},
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      userIdLogin: localStorage.pskh_userId,
    }
  },
  filters: {
    MeetStatus(val) {
      switch (val) {
        case '0':
          return '草稿'
        case '1':
          return '待审批'
        case '2':
          return '未开始'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
        case '5':
          return '已取消'
        default:
          return '-'
      }
    },
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
  },
  created() {},
  mounted() {},
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    editMeet(row) {
      this.$emit('edit-meet', row.id)
    },
    delMeet(row) {
      this.$confirm('确定删除该会议吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          this.$emit('del-meet', row.id)
        })
        .catch()
    },
    cancleMeet(row) {
      this.$confirm('确定取消该会议吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          this.$emit('cancle-meet', row.id)
        })
        .catch()
    },
    detail(row) {
      this.$emit('detail', row.id)
    },
    updateMeet(row) {
      this.$emit('update-meet', row.id)
    },
  },
}
</script>
<style lang="scss" scoped>
.manage-table {
  height: calc(100%);
  display: flex;
  flex-direction: column;
  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4eaf0;
    padding-bottom: 10px;
    .search-left {
      display: flex;
      align-items: center;
      .search-item {
        max-width: 240px;
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
      .search-inp {
        width: 240px;
      }
      .el-icon-search {
        cursor: pointer;
      }
      .num-li {
        padding: 0 20px;
        border-right: 1px solid #dcdfe6;
        cursor: pointer;
        &:last-child {
          border-right: 0;
        }
        &:nth-child(3) {
          color: #d9001b;
        }
        &:nth-child(4) {
          color: #e6a23c;
        }
      }
      .active_num {
        font-weight: 600;
      }
      .el-date-editor {
        min-width: 250px;
      }
    }
    .search-right {
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
      .info_box {
        color: #d9001b;
      }
      .info {
        display: flex;
        align-items: center;
        .info_list {
          margin-left: 20px;
        }
      }
    }
  }
  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
  .bg-pagination {
    margin-top: 10px;
  }
}
</style>
